<template>
    <el-dialog
        :visible.sync="showRluesPage"
        title="设置规则"
        :show-close="false"
        width="40%"
        destroy-on-close>
        <el-form ref="actionform" class="actionform" :model="formData" label-width="80px" v-loading="showLoading">
            <el-form-item label="配置权益" verify prop="medalEquityUid">
                <el-select v-model="formData.medalEquityUid" placeholder="请选择勋章权益" class="formItem">
                    <el-option
                        v-for="item in medalEquityList"
                        :key="item.medalEquityUid"
                        :label="item.medalEquityName"
                        :value="item.medalEquityUid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
                <p class="flex-center margin_top_30">
                    <el-button type="primary" @click="handlePost">确  认</el-button>
                    <el-button @click="closeDialog">取  消</el-button>
                </p>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
    import {
		setEquity,
    } from "@/api/table";

    export default {
        name: "MEDAL_EQUITY",
        components: {},
        props: {
            // show: {
            //     type: Boolean,
            //     default() {
            //         return false
            //     }
            // },
            info: {
                type: Object,
                default() {
                    return {}
                }
            },
            medalEquityList: {
                type: Array,
                default() {
                    return []
                }
            },
        },

        data() {
            return {
                showRluesPage: true,
                showLoading: false,
                formData: this.info,
            }
        },
        watch: {
			show(newVal, oldVal) {
				this.showRluesPage = newVal
            },
            info(newVal, oldVal) {
                this.formData = newVal
            }
		},

      	methods: {
			// 确认
			handlePost() {
                const { medalEquityUid, medalUid } = this.formData;
                // console.log('...', { medalEquityUid, medalUid })
                this.showLoading = true;
                this.$refs.actionform.validate(valid => {
                    if (valid) {
                        setEquity({
                            medalEquityUid,
                            medalUid
                        }).then(res => {
                            if (res.data.isSuccessful === "Y") {
                                this.$event.emit('MedalEquityChange', res.data.data)
                            }
                        }).finally(_=> {
                            this.showLoading = false;
                        });
                    }
                });
				
			},
			closeDialog() {
				this.$event.emit('CloseEquityPage')
			},
      	},
  	}
</script>
<style lang="scss" scoped>
    .actionform {
        min-height: 200px;
        flex-direction: column;
        display: flex;
        justify-content: space-between;
    }
	.formItem {
		width: 300px;
	}
</style>

